<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/2.6.9/vue.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.22.0/axios.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
    <div id="app">
        <div>{{result}}</div>
    </div>
    <script>
        new Vue({
            el:"#app",
            data(){
                return{
                    result:[]
                }
            },
            methods:{
                // 把一个函数作为参数传递给 callback
                loadAritcles(type,url,data,callback){
                    axios.defaults.baseURL="http://localhost:3000"
                    if(data==undefined){
                        data="";
                    }
                    if(type==get){
                        axios.get(url,{
                            params:{
                                data
                            }
                        }).then(result=>{
                            // 拿到结果
                            let as=result.data.result;
                            // 拿到结果传递给回调函数 执行后续逻辑
                            callback(as);
                        })
                    }else if(typp=post){
                        axios.get(url,data).then(result=>{
                            // 拿到结果
                            let as=result.data.result;
                            // 拿到结果传递给回调函数 执行后续逻辑
                            callback(as);
                        })
                    }
                }
                // 如何调用
                // loadAritcles(get,/aritcles,function(data){
//                                  后续逻辑
                // })
            },watch:{
                result(){
                    loadAritcles(get,"/aritcles",function(data){
                        console.log(data);
                    })
                }
            }
        })
    </script>
</body>
</html>